<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" :offset="17">
				<el-input style="width: 18.7rem;margin: 0 0.5rem 0.5rem 0;" clearable suffix-icon="el-icon-search" v-model="queryParams.content" placeholder="请输入内容"></el-input>
				<el-button class="bgc2f6 cfff" @click="seach">搜索</el-button>
			</el-col>
		</el-row>
		<div class="w100 p1 h65 bgcfff bsbb" style="border: #e6e6e6 1px solid; border-radius: 8px;">
			<div class="standardList" v-loading="loading" element-loading-text="拼命加载中">
				<!-- <el-row :gutter="20" class="bb01 p05 w100" v-for="(item, index) in getStandardList" :key="index">
					<el-col :span="7"><img style="width: 16.5rem;height: 8.5rem;" :src="url + item.image" alt="" /></el-col>
					<el-col :span="17">
						<el-row :gutter="20">
							<el-col :offset="0" class="fwb fz103">{{ item.title }}</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :offset="0" class="c999 fz05 pt05">关键字：{{ item.intro }}</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12" :offset="12" style="text-align: right;">
								<el-button type="primary" @click="viewsDetails(item.id)" round plain>查看详情</el-button>
							</el-col>
						</el-row>
						<el-row :gutter="20" class="pt1">
							<el-col :span="18" class="fz05">开发单位：<span v-html="item.company"></span></el-col>
							<el-col :span="6" class="fz05">{{ formatDate(item.create_time) }}</el-col>
						</el-row>
					</el-col>
				</el-row> -->
				<ul v-for="(item, index) in getStandardList" :key="index" :class="index % 2 == 0 ? 'ad' : 'ap'">
					<li>
						<span style="width: 90%;display: inline-block;">{{ item.title }}</span>
						<span style="width: 10%; color: #146ac1;cursor: pointer;" @click="dowload(item)"><i class="el-icon-download"></i>下载</span>
					</li>
				</ul>
			</div>
			<div class="tar">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[19, 30, 45, 60]"
					:page-size="queryParams.pageSize"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="count"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { standard } from '@/api/resourceCenter.js';
import { getItem } from '@/utils/storage.js';
export default {
	name: 'geothermySubjectClassifyDrill',
	data() {
		return {
			input: null,
			getStandardList: [],
			loading: false,
			count:null,
			queryParams: {
				pageSize: 19,
				page: 1,
				type: 2,
				content: null,
				token: getItem('token')
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			standard(this.queryParams).then(res => {
				this.loading = false;
				this.getStandardList = res.data.arr;
				this.count = res.data.count;
			});
		},
		viewsDetails(id) {
			this.$router.push({
				path: '/details',
				query: {
					id: id
				}
			});
		},
		dowload(val) {
			let alink = document.createElement('a');
			alink.href = this.url + val.content;
			alink.download = '文件'; //图片名
			alink.click();
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.queryParams.page = val;
			this.getList();
		},
		seach() {
			this.getList();
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
.standardList {
	height: 61rem;
	overflow-y: auto;
}
::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.ad {
	background-color: #f4f4f4;
	height: 3rem;
	line-height: 3rem;
	border-radius: 0.3rem;
}
.ap {
	background-color: #FFFFFF;
}
</style>
